<template>
    <div>
            <!--使用draggable组件-->
        <div style="display: flex;text-align: left;padding-left: 1vw">
            <h4 style="margin-top: 8px;width: 50%">看板</h4>
            <h4 style="margin-top: 8px;width: 50%">视图库</h4>
        </div>
            <div class="itxst" style="width: 103%">

                <div class="col leftCol" style="min-height: 300px">
                    <div style="display: flex;justify-content: space-between">
                        <el-button @click="clear"  type="primary">一键清空</el-button>
                        <el-button @click="reset"  type="primary">重置</el-button>

                    </div>
                    <draggable v-model="arrKanban"   @end="end2" :options="{group:{name: 'itxst'}}"  animation="300" :move="onMove">
                        <transition-group  style="display: flex;flex-wrap: wrap;justify-content: space-between">
                            <div :class="item.id == 90 || item.id == 91 || item.id == 100 ? 'item50' :item.id == 11 ? 'item100':item.id == 4 || item.id == 41 || item.id == 40 ? 'item33' : 'item2'" v-for="(item,index) in arrKanban" :key="index" class="content">
                                <el-tooltip effect="dark" content="移除" placement="right-end">
                                    <i class="el-icon-delete delete" @click="del(index)" v-if="item.id != 11"></i>
                                </el-tooltip>
                                    {{item.name}}
                            </div>
                        </transition-group>
                    </draggable>
                </div>
                <div class="col rightCol">

                    <section class="rightList">
                        <div :class="item == checked?'item forbid':'item'" v-for="(item,index) in groupArr" :key="index" @click="changeGroup(item)">{{item}}</div>
                    </section>
                    <section  class="rightContent">
                        <draggable v-model="arrList"   @end="end1" :options="{group:{name: 'itxst',pull:'clone',put: false},sort: false}"  animation="300">
                                <transition-group style="display: flex;flex-wrap: wrap;justify-content: space-between">
                                    <div class="item30" v-for="(item,index) in arrList" :key="index">{{item.name}}</div>
                                </transition-group>
                            </draggable>
                    </section>
                </div>
            </div>
            <div style="width: 100%;text-align: right">
                <el-button @click="dialogVisible.dialogVisible = false">取消</el-button>
                <el-button @click="save" type="primary" style="margin-right: 1vw">保存</el-button>
            </div>
        </div>
</template>
<script>
    //导入draggable组件
    import draggable from 'vuedraggable'
    export default {
        name:'ReportCenterDrag',
        //注册draggable组件
        components: {
            draggable,
        },
        props:{
            dialogVisible:Object,
            res:Object,
            idArrObj:Object
        },
        data() {
            return {
                firstArr2:[],
                //正常使用时将idArr换位接口传递的数组  每个图表有一个唯一标识
                idArr:[],
                //定义要被拖拽对象的数组
                arrList:[
                ],
                groupArr:[],
                arrKanban:[
                    // { id: 11, name: '常用菜单',value:'11、常用菜单' },
                ],
                moveId:-1,
                checked:'',
                firstArrKanban:[]
            };
        },
        methods: {
            // 重置
            reset(){
                this.arrKanban = []
                this.getArrKanBan(this.idArr,this.res.data)
            },
            changeGroup(group){
                this.checked = group
                this.getArrList(group)
            },
            del(index){
                this.arrKanban.splice(index,1)
            },
            clear(){
                this.arrKanban = []
                this.idArr = [11]
            },
            save(){
                this.idArr = []
                this.getIdArr(this.arrKanban)
                this.dialogVisible.dialogVisible = false
                //    正常使用点击保存时将idArr传入接口
            },
            getIdArr(arr){
                arr.map((item) => {
                    this.idArr.push(item.id)
                })
                console.log(this.idArr)
                this.$emit('toKanBan',this.idArr)

            },
            createRandomItemStyle(){
                return 'rgb(' + [
                    Math.round(Math.random()*180),
                    Math.round(Math.random()*180),
                    Math.round(Math.random()*360)
                ].join(',')+')'
            },
            createRandomValue(){
                return Math.round(Math.random()*1000)
            },
            //右边边往左边拖动时的事件
            end1(e){
                console.log(e)
                var that=this;
                var  items=this.arrKanban.filter(function(m){
                    return  m.id==that.moveId
                })
                //如果左边
                if(items.length<2) return;
                this.arrKanban.splice(e.newDraggableIndex, 1)
            },
            //右边往左边拖动时的事件
            end2(e){
                console.log(e)
                var that=this;
                var  items=this.res.data.filter(function(m){
                    return  m.id==that.moveId
                })
                //如果左边
                if(items.length<2) return;
            },
            //move回调方法
            onMove(e){
                this.moveId=e.relatedContext.element.id;
                //不允许停靠
                if (e.relatedContext.element.id == 11) return false;
                //不允许拖拽
                // if (e.draggedContext.element.id == 4) return false;
                if (e.draggedContext.element.id == 11) return false;
                return true;
            },
            getArrList(groupName){
                this.arrList = []
                this.res.data.map(m => {
                    if(m.group == groupName){
                        this.arrList.push(m)
                    }
                })
            },
            getArrKanBan(arr,arrList){
                for(let index in arr){
                    for(let innerIndex in arrList){
                        if(arr[index] == arrList[innerIndex].id){
                            this.arrKanban.push(arrList[innerIndex])
                        }
                    }
                }
            }
        },
        created() {
            this.idArr = this.idArrObj.idArr
            this.firstArrKanban = this.idArr
            this.res.data.map(m => {
                if(m.group == '指数'){
                    this.checked = '指数'
                    this.arrList.push(m)
                }
                this.groupArr.push(m.group)
            })
            let groupArr = new Set(this.groupArr)
            this.groupArr = Array.from(groupArr)
            this.getArrKanBan(this.idArr,this.res.data)


        }
    };
    Array.prototype.filter = Array.prototype.filter || function(func) {
        var arr = this;
        var r = [];
        for (var i = 0; i < arr.length; i++) {
            if (func(arr[i],i,arr)) {
                r.push(arr[i]);
            }
        }
        return r;
    }
</script>
<style scoped>
    .itxst {
        display: flex;
        margin: 10px;
        text-align :left;
        flex-wrap: wrap;
    }
    .col {
        /*width: 40%;*/
        /*flex: 1;*/
        padding: 10px;
        border: solid 1px #eee;
        border-radius: 5px;
        float: left;
    }
    .leftCol{
        width: 45%;
        background-color: #eee;
    }
    .rightCol{
        display: flex;
        justify-content: space-between;
        width: 45%;
        background-color: #eee;
    }
    .rightList{
        width: 30%;
    }
    .rightContent{
        width: 67%;

    }
    .rightContentList{
        width: 30%;
    }
    .col + .col {
        margin-left: 10px;
    }
    .item {
        padding: 6px 12px;
        margin-bottom: 10px;
        border: solid 1px rgba(0, 183, 255, 0.93);
        border-radius: 7px;
        background-color: white;
        text-align: left;
        color: rgba(0, 183, 255, 0.93);
        font-size: 14px;
    }
    .forbid {
        background-color: rgba(0, 183, 255, 0.93);
        color: white;
    }
    .item:hover{
        cursor: pointer;
        box-shadow: 2px 2px 2px rgba(0, 183, 255, 0.53);
    }


    .item2 {
        padding: 6px 12px;
        margin-top: 10px;
        border: solid 1px rgba(0, 183, 255, 0.93);
        border-radius: 7px;
        background-color: white;
        text-align: left;
        color: rgba(0, 183, 255, 0.93);
        font-size: 14px;
        width: 100%;
        height: 40px;
        line-height: 40px;

    }

    .item50 {
        padding: 6px 12px;
        margin-top: 10px;
        border: solid 1px rgba(0, 183, 255, 0.93);
        border-radius: 7px;
        background-color: white;
        text-align: left;
        color: rgba(0, 183, 255, 0.93);
        font-size: 14px;
        width: 41%;
        height: 40px;
        line-height: 40px;
    }
    .item33 {
        padding: 6px 12px;
        margin-top: 10px;
        border: solid 1px rgba(0, 183, 255, 0.93);
        border-radius: 7px;
        background-color: white;
        text-align: left;
        color: rgba(0, 183, 255, 0.93);
        font-size: 14px;
        width: 24%;
    }
    .item30 {
        padding: 6px 12px;
        margin-top: 10px;
        border: solid 1px rgba(0, 183, 255, 0.93);
        border-radius: 7px;
        background-color: white;
        text-align: left;
        color: rgba(0, 183, 255, 0.93);
        font-size: 14px;
        width: 22%;
    }
    .item100 {
        padding: 6px 12px;
        margin-top: 10px;
        border: solid 1px rgba(0, 183, 255, 0.93);
        border-radius: 7px;
        background-color: white;
        text-align: left;
        color: rgba(0, 183, 255, 0.93);
        font-size: 14px;
        width: 100%;
    }
    .item30:hover,
    .item33:hover,
    .item50:hover,
    .item2:hover {
        box-shadow: 2px 2px 2px rgba(0, 183, 255, 0.53);
        cursor: move;
    }
    .delete{
        margin-top: 3px;
        float: right;
    }
    .delete:hover{
        cursor:pointer;
    }

</style>
<style>
    .el-dialog__body{
        padding-top: 0!important;
    }
</style>